<template>
  <Header></Header>
  <div class="startup">
    <el-card class="startup-card">
      <h2>Gate.io Startup</h2>
      <p>区块链项目打折促销通道</p>
      <el-tabs v-model="activeTab">
        <el-tab-pane label="全部 (16)" name="all"></el-tab-pane>
        <el-tab-pane label="进行中 (6)" name="ongoing"></el-tab-pane>
        <el-tab-pane label="已结束 (12)" name="ended"></el-tab-pane>
      </el-tabs>
      <el-row :gutter="20" v-for="project in filteredProjects" :key="project.name" class="project-row">
        <el-col :span="24">
          <el-card shadow="hover" class="project-card">
            <div class="project-info">
              <img :src="project.icon" alt="project icon" class="project-icon">
              <div>
                <h3>{{ project.name }}</h3>
                <p>首发：{{ project.isFirst ? '首发' : '非首发' }}</p>
                <p>空投：{{ project.isAirdrop ? '空投' : '无' }}</p>
                <p>已筹款：{{ project.funded }}%</p>
                <p>目标：{{ project.target }}</p>
                距开始：<el-countdown :value="new Date(project.startTime)" format="DD [天] HH:mm:ss"></el-countdown>
                <el-tag :type="project.statusType">{{ project.status }}</el-tag>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
  <Footer></Footer>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";

const activeTab = ref('ongoing');
const projects = ref([
  {
    name: '比特币 NB NB NB',
    isFirst: true,
    isAirdrop: false,
    funded: '333.38',
    target: '2000000USDT',
    startTime: '2025-12-12 10:00:00',
    status: '进行中',
    statusType: 'success',
    icon: 'https://demosc.chinaz.net/Files/pic/icons/7566/a10.png'
  },
  {
    name: 'ETH 以太坊 最牛公链',
    isFirst: false,
    isAirdrop: false,
    funded: '88.88',
    target: '1000000USDT',
    startTime: '2024-12-7 10:59:00',
    status: '进行中',
    statusType: 'success',
    icon: 'https://www.iconarchive.com/download/i109534/cjdowner/cryptocurrency-flat/Ethereum-ETH.1024.png'
  }
]);

const filteredProjects = computed(() => {
  return projects.value.filter(project => {
    if (activeTab.value === 'all') {
      return true;
    } else if (activeTab.value === 'ongoing') {
      return project.status === '进行中';
    } else if (activeTab.value === 'ended') {
      return project.status === '已结束';
    }
  });
});

function calculateTimeLeft(project) {
  const now = Date.now() / 1000;
  const diff = (project.startTime - now).toFixed(0);
  if (diff < 0) return '00:00:00';

  const hours = Math.floor(diff / 3600);
  const minutes = Math.floor((diff % 3600) / 60);
  const seconds = diff % 60;

  return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
}

function pad(value) {
  return value.toString().padStart(2, '0');
}

projects.value.forEach(project => {
  project.timeLeft = calculateTimeLeft(project);
});

let timer = null;

onMounted(() => {
  timer = setInterval(() => {
    projects.value.forEach(project => {
      project.timeLeft = calculateTimeLeft(project);
    });
  }, 1000);
});

onUnmounted(() => {
  clearInterval(timer);
});
</script>

<style scoped>
.startup {
  margin-top: 55px;
  width: 99%;
  padding: 20px;
}

.startup-card {
  margin-bottom: 20px;
}

.project-row {
  margin-top: 20px;
}

.project-card {
  margin-bottom: 20px;
}

.project-info {
  display: flex;
  align-items: center;
}

.project-icon {
  width: 50px;
  height: 50px;
  margin-right: 20px;
}
</style>